<template>
  <div class="app">
  	<the-header v-if="$route.meta.showPageHeader"></the-header>
    <keep-alive exclude="Search,Register,Buy,Login,Personal,FindPwd,Pay,PersonalOrderDetail,PersonnalIdentityEdit,PersonalIdentityIdentity,PersonalIdentityContacts,Activity,Whiteday">
      <router-view></router-view>
    </keep-alive>
    <v-alert v-if="show"></v-alert>
    <transition name="fade"><v-toast v-if="toastShow"></v-toast></transition>
  	<the-footer v-if="$route.meta.showPageFooter"></the-footer>
  </div>
</template>

<script>
import TheHeader from '@/components/TheHeader'
import TheFooter from '@/components/TheFooter'
import VAlert from '@/components/base/VAlert'
import VToast from '@/components/base/VToast'
import {delCookie} from '@/util/util'

export default {
  name: 'App',
  components: {
    TheHeader,
    TheFooter,
    VAlert,
    VToast
  },
  methods: {
    checkLogin () {
      this.$ajax.getUserInformation().then((res) => {
        if (res.code === 201) {
          delCookie('username')
          delCookie('profile')
          delCookie('unreadMsg')
        }
      })
    }
  },
  computed: {
    show () {
      return this.$store.state.alert.switch
    },
    toastShow () {
      return this.$store.state.toast.switch
    }
  },
  watch: {
    toastShow (val) {
      if (val) {
        setTimeout(() => {
          this.$store.commit('toast', { switch: false })
        }, 3000)
      }
    }
  },
  created () {
    this.checkLogin()
  }
}
</script>

<style>
*{word-wrap:break-word}
html,body,h1,h2,h3,h4,h5,h6,hr,p,iframe,dl,dt,dd,ul,ol,li,pre,form,button,input,textarea,th,td,fieldset{margin:0;padding:0}
ul,ol,dl{list-style:none}
html{font-family: sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}
input,button{overflow: visible;vertical-align:middle;outline:none}
body,th,td,button,input,select,textarea{font-family:"PingFang SC","Hiragino Sans GB","Microsoft Yahei","Helvetica Neue",Helvetica,tahoma,arial,Verdana,sans-serif,"WenQuanYi Micro Hei","\5B8B\4F53";font-size:14px;color: #333;-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased}
body{line-height:1.6}
h1,h2,h3,h4,h5,h6{font-size:100%}
a,area{outline:none;blr:expression(this.onFocus=this.blur())}
a{text-decoration:none;cursor: pointer}
a:hover{text-decoration:none;outline:none}
a.ie6:hover{zoom:1}
a:focus{outline:none}
a:hover,a:active{outline:none}:focus{outline:none}
sub,sup{vertical-align:baseline}
/*img*/
img{border:0;vertical-align:middle}
a img,img{-ms-interpolation-mode:bicubic}
.img-responsive{max-width: 100%;height: auto}
/** 重置表格元素 **/
table {border-collapse:collapse;border-spacing: 0;}
/*HTML5 reset*/
header,footer,section,aside,details,menu,article,section,nav,address,hgroup,figure,figcaption,legend{display:block;margin:0;padding:0}time{display:inline}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
audio:not([controls]){display:none}
legend{width:100%;margin-bottom:20px;font-size:21px;line-height:40px;border:0;border-bottom:1px solid #e5e5e5}
legend small{font-size:15px;color:#999}
svg:not(:root) {overflow: hidden}
fieldset {border-width:0;padding: 0.35em 0.625em 0.75em;margin: 0 2px;border: 1px solid #c0c0c0}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {height: auto}
input[type="search"] {-webkit-appearance: textfield; /* 1 */-moz-box-sizing: content-box;-webkit-box-sizing: content-box; /* 2 */box-sizing: content-box}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {-webkit-appearance: none}

.cl:after,.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}.cl,.clearfix{zoom:1}
/*自定义样式*/
.app div input:focus {
  /*border-color: #448ee7;*/
  border-color: #a6a6a6;
}

.app div textarea:focus {
  /*border-color: #448ee7;*/
  border-color: #a6a6a6;
}

.app div input.input-error {
  border: 1px solid #fc4343;
}

.app div textarea.input-error {
  border-color: #fc4343;
}

::-webkit-input-placeholder {
  color: #A5A5A5;
}

::-moz-placeholder {
  color: #A5A5A5;
}

/* firefox 19+ */
:-ms-input-placeholder {
  color: #A5A5A5;
}

/* ie */
input:-moz-placeholder {
  color: #A5A5A5;
}

textarea:-ms-input-placeholder{
  color: #a5a5a5;
}

textarea::-webkit-input-placeholder{
  color: #a5a5a5;
}

/*class类名请放在input的外围标签div中*/
.input-help input {
  padding-right: 50px !important;
}

/*class类名请放在input的外围标签div中，防止input的自动填充覆盖图标*/
.input-loading {
  position: relative;
}

.input-loading:after {
  content: '';
  display: block;
  width: 50px;
  height: 100%;
  background: url(assets/images/icon_loading.gif) no-repeat center;
  position: absolute;
  top: 0;
  right: 0;
}

/*class类名请放在input的外围标签div中，防止input的自动填充覆盖图标*/
.input-success {
  position: relative;
}

.input-success:after {
  content: '';
  display: block;
  width: 50px;
  height: 100%;
  background: url(assets/images/icon_success_16px.png) no-repeat center;
  position: absolute;
  top: 0;
  right: 0;
}

/*设置input的自动填充时的背景颜色为白色*/
input:-webkit-autofill {
 -webkit-box-shadow: 0 0 0px 1000px white inset;
 -webkit-text-fill-color: #333;
}
/*设置input的自动填充时的背景颜色为白色的另外的一种写法*/
/*input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition-delay: 99999s;
    -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
}*/

.input-auto {
  height: 0;
  opacity: 0;
  position: absolute;
  z-index: -9999;
}

.error-tips {
  line-height: 16px;
  padding-left: 24px;
  font-size: 14px;
  color: #FF600A;
  margin-top: 12px;
  background: url(assets/images/icon_errorTips.png) no-repeat;
}

.btn {
  width: 150px;
  height: 46px;
  cursor: pointer;
}

.btn-orange {
  color: #fff;
  background-color: #ff600a;
  border: 0;
}

.btn-orange:hover {
  background-color: #ff3c00;
}

.btn-orange:active {
  background-color: #e83700;
}

.btn-white {
  color: #ff600a;
  border: 1px solid #ff600a;
  background-color: #fff;
}

.btn-white:hover {
  color: #fff;
  background-color: #ff600a;
}

.btn-white:active {
  color: #fff;
  background-color: #e83700;
}

.btn-gray {
  color: #666;
  background-color: #fff;
  border: 1px solid #d7d7d7;
}

.btn-gradient {
  background: #f8b42d;
  background: -webkit-linear-gradient(left, #f8b42d, #ff772e);
  background: -moz-linear-gradient(left, #f8b42d, #ff772e);
  background: -o-linear-gradient(left, #f8b42d, #ff772e);
  background: linear-gradient(to right, #f8b42d, #ff772e);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8b42d', endColorstr='#ff772e', GradientType=1);
}

.btn-gradient:hover {
  background: -webkit-linear-gradient(left, #f7951e, #ff531f);
  /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, #f7951e, #ff531f);
  /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, #f7951e, #ff531f);
  /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, #f7951e, #ff531f);
  /* 标准的语法 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7951e', endColorstr='#ff531f', GradientType=1);
}

.el-input--prefix .el-input__inner {
  height: 46px;
}

.el-input__inner {
  border-radius: 2px;
  border: 1px solid #d7d7d7;
}

.el-date-table td.current:not(.disabled) span {
  background-color: #ff600a;
}

/*loading动画*/
/*使用时，需要在button里面的文字套一层span标签，然后把类名加在span上*/
.btn-loading {
  position: relative;
}

.btn-loading:before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  width: 0\9\0; /*ie9不显示*/
  background: url(assets/images/loading.png) no-repeat center;
  -webkit-animation: loading 1s infinite linear; 
  -moz-animation: loading 1s infinite linear; 
  -ms-animation: loading 1s infinite linear; 
  -o-animation: loading 1s infinite linear; 
  animation: loading 1s infinite linear;
  position: absolute;
  top: 50%;
  right: -32px;
  margin-top: -8px;
}

@-webkit-keyframes loading {
  0% {-webkit-transform: rotate(0);}
  100% {-webkit-transform: rotate(360deg);}
}

@-moz-keyframes loading {
  0% {-moz-transform: rotate(0);}
  100% {-moz-transform: rotate(360deg);}
}

@-ms-keyframes loading {
  0% {-ms-transform: rotate(0);}
  100% {-ms-transform: rotate(360deg);}
}

@-o-keyframes loading {
  0% {-o-transform: rotate(0);}
  100% {-o-transform: rotate(360deg);}
}

@keyframes loading {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
}

.box-tip {
  border: 1px solid #FF600A;
  padding: 22px 22px 22px 54px;
  background: #FFFDF4 url(assets/images/icon_errorTips.png) no-repeat 24px 24px;
  line-height: 22px;
}
/* toast过渡效果 */
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>
